<template>
  <div class='cmt-container'>
      <h3>发表评论</h3>
      <hr>
      <textarea  placeholder='请做出你的评价' cols="4" rows="4" v-model='msg'></textarea>
      <mt-button type="primary" size="large" @click='publishComment'>发表评论</mt-button>

      <!-- 总评论表中的div -->
      <div class='cmt-list'>
          <div class='cmt-item' v-for='(item, index) in commentInfo' :key='index'>
            <div class='cmt-title'>
                第{{ index+1 }}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dateFormat }}
            </div>
            <div class='cmt-body'>
                {{ item.content === 'undefined' || item.content.trim().length == 0 ? '此用户未做任何评价':item.content}}
            </div>
          </div>
      </div>

      <mt-button type="danger" size="large" plain @click='getMoreComment'>加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      pageindex:1,
      commentInfo:[],
      msg:''
    };
  },
  props:["id"],
  created(){
      this.getCommentInfo();
  },
  methods:{
      getCommentInfo(){
          this.$http.get('api/getcomments/'+ this.id +'?pageindex=' + this.pageindex).then(res => {
              if(res.body.status === 0) {
                  this.commentInfo = this.commentInfo.concat(res.body.message);
                //   console.log(this.commentInfo);
                  
              } else {
                  Toast("获取评论信息失败");
              }
          })
      },
      getMoreComment(){
        //上面评论接口传入的值是id与pageindex两个值
        this.pageindex++;
        this.getCommentInfo();
      },
      publishComment(){
        //校验是否为空
        if(this.msg.trim().length === 0){
            Toast('评论内容不能为空！')
        }

        // 发表评论
        this.$http.post('api/postcomment/' + this.$route.params.id,{
            content:this.msg.trim()
        }).then(res => {
            if(res.body.status === 0) {
                var cmt = {
                    user_name:'匿名用户',
                    add_time: Date.now(),
                    content: this.msg.trim()
                };
                this.commentInfo.unshift(cmt);
                this.msg = '';
            }
        })
      }
  }
}
</script>
<style lang="scss" scoped>
    .cmt-container{
        h3 {
            font-size:18px;
        }
        textarea {
            font-size: 14px;
            margin: 0;
        };
        .cmt-list{
            margin: 5px 0;
            .cmt-item{
                font-size:13px;
                .cmt-title{
                    line-height:30px;
                    background-color:#ccc;
                }
                .cmt-body{
                    line-height:35px;
                    text-indent:2em;
                }
            }
        }
    }

</style>